<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('用户列表')" />
</head>

<!--<head th:include="include :: header"></head>-->
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12">
				<form id="formId">
					<div class="select-list">
						<ul>
							<li>
								关键词搜索： <input type="text" id="keyword"/>
							</li>
							<li>
								<input type="hidden" id="type" value="mysql">
								<a class="btn btn-primary" onclick="searchMysqlES('mysql')"><i class="fa fa-search"></i>&nbsp;Mysql搜索</a>
								<a class="btn btn-warning" onclick="searchMysqlES('es')"><i class="fa fa-refresh"></i>&nbsp;ES搜索</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			<div class="btn-group-sm" id="toolbar" role="group">
				<a class="btn btn-success" onclick="$.operate.add()">
					<i class="fa fa-plus"></i> 添加
				</a>
				<a class="btn btn-primary single disabled" onclick="$.operate.edit()" >
					<i class="fa fa-edit"></i> 修改
				</a>
			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
		</div>
	</div>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
			var prefix = ctx + "es";
			function searchMysqlES(type) {
				$("#type").val(type);
					var keyword = $("#keyword").val();
					if (keyword == null || keyword == "") {
						alert("请输入搜索内容");
						return;
					}
                var url = prefix + '/search/' + type + "/" +keyword;
                createMenuItem(url, type+"搜索内容");
				// $.ajax({
				// 	url: prefix + "/search",
				// 	type:"post",
				// 	dataType:"json",
				// 	data:{"type":type,"keyword":keyword},
				// 	success:function(data){
				// 		console.log(JSON.stringify(data))
				//
				// 		/*$("#bootstrap-table").empty();
				// 		$("#bootstrap-table").append("<tr><td>主键</td><td>姓名</td><td>年龄</td><td>电话号码</td><td>备注</td><td>操作 / <a href='add'>添加</a></td></tr>");
				// 		for(var i=0;i<data.list.length;i++){
				// 			$("#bootstrap-table").append("<tr><td>"+data.list[i].id+"</td><td>"+data.list[i].name+"</td><td>"+data.list[i].age+"</td><td>"+data.list[i].phone+"</td><td>"+data.list[i].remark+"</td><td><button onclick='findById("+data.list[i].id+")'>修改</button> <button onclick='deleteById("+data.list[i].id+")'>删除</button> </td></tr>")
				// 		}
				// 		$("#totalTimeMillis").text(data.totalTimeMillis)
				// 		$("#count").text(data.list.length)*/
				// 	},error:function (data) {
				// 		console.log("网络异常")
				// 	}
				// })
			}

			function queryParams(parames) {
				searchMysqlES("mysql");
				var params = $.table.queryParams(parames);
				params["type"] =$("#type").val();
				params["keyword"] = $("#keyword").val();
				return params;
			}

			$(function () {
				var options = {
					url: prefix + "/selectAll",
					createUrl: prefix + "/add/{id}",
					updateUrl: prefix + "/edit/{id}",
					removeUrl: prefix + "/remove",
					exportUrl: prefix + "/export",
					modalName: "用户",
					columns: [{
						checkbox: true
					},
						{
							field: 'id',
							title: '主键',
							visible: false
						},
						{
							field: 'name',
							title: '姓名'
						},
						{
							field: 'age',
							title: '年龄'
						},
						{
							field: 'phone',
							title: '电话号码'
						},
						{
							field: 'remark',
							title: '备注'
						},

						{
							title: '操作',
							align: 'center',
							formatter: function (value, row, index) {
								var actions = [];
								actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
								actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
								return actions.join('');
							}
						}]
				};
				$.table.init(options);
			});

	</script>
</body>
</html>